<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row>
          <el-col class="top_title">
            <span>说明:目前支持学科和关键字条件筛选</span>
            <el-button type="success" size="small" icon="el-icon-edit">
              新增试题
            </el-button>
          </el-col>
        </el-row>
        <el-form :model="query" label-width="80px"
          ><el-row>
            <!-- 表单区域 -->
            <el-col :span="6">
              <el-form-item label="学科" class="form-item">
                <el-select
                  @change="simple2List"
                  v-model="form.subjectID"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in simple"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  v-model="form.catalogID"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in simple2"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select
                  v-model="form.tags"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in simple3"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="form.keyword"
                  placeholder="请根据题干搜索"
                  class="int"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select
                  v-model="form.questionType"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="单选" value="1"></el-option>
                  <el-option label="多选" value="2"></el-option>
                  <el-option label="简单" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select
                  v-model="form.difficulty"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="简单" value="1"></el-option>
                  <el-option label="一般" value="2"></el-option>
                  <el-option label="困难" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select
                  v-model="form.direction"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in directionList"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select
                  v-model="form.creatorID"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in simple4"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="form.remarks" class="int"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="form.shortName" class="int"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select
                  v-model="form.city"
                  placeholder="请选择"
                  @change="cityList"
                  class="city-1"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in provincesLists"
                    :key="index"
                  ></el-option>
                </el-select>
                <el-select
                  class="city-2"
                  v-model="form.province"
                  placeholder="请选择"
                  style="width: 45%"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in citysList"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="content">
                <el-button @click="ClearData">清除</el-button>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-row>
          <el-col :span="24">
            <el-alert
              :title="'数据一共' + counts + '条'"
              show-icon
              :closable="false"
            ></el-alert>
          </el-col>
        </el-row>

        <!-- 表格区域 -->
        <el-row>
          <el-col :span="24">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="number" label="试题编号">
              </el-table-column>
              <el-table-column prop="subject" label="学科"> </el-table-column>
              <el-table-column prop="catalog" label="目录"> </el-table-column>
              <el-table-column prop="questionType" label="类型">
                <template v-slot="scoped">
                  <p v-if="scoped.row.questionType == 1">单选</p>
                  <p v-if="scoped.row.questionType == 2">多选</p>
                  <p v-if="scoped.row.questionType == 3">简答</p>
                </template>
              </el-table-column>
              <el-table-column prop="question" label="提干" width="300">
                <template v-slot="scoped">
                  <p v-html="scoped.row.question"></p>
                </template>
              </el-table-column>
              <el-table-column prop="addDate" label="录入时间">
              </el-table-column>
              <el-table-column prop="difficulty" label="难度">
                <template v-slot="scoped">
                  <p v-if="scoped.row.difficulty == 1">简单</p>
                  <p v-if="scoped.row.difficulty == 2">一般</p>
                  <p v-if="scoped.row.difficulty == 3">困难</p>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人"> </el-table-column>
              <el-table-column label="操作" width="200">
                <template v-slot="scoped">
                  <el-button
                    type="primary"
                    icon="el-icon-view"
                    circle
                    @click="previewArticle(scoped.row.id)"
                  ></el-button>
                  <el-button
                    type="success"
                    icon="el-icon-edit"
                    circle
                    @click="getDescribe(scoped.row.id)"
                  ></el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="delArticle(scoped.row.id)"
                  ></el-button>
                  <el-button
                    type="warning"
                    icon="el-icon-check"
                    circle
                    @click="choiceAddArticle(scoped.row.id)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>

        <!-- 分页 -->
        <el-row type="flex" justify="end" class="basics-question-bank-paging">
          <el-pagination
            class="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
          >
          </el-pagination>
        </el-row>

        <el-dialog
          title="题目预览"
          :visible="dialogVisible"
          width="50%"
          modal-append-to-body
          :before-close="handleClose"
          @open="openDialog"
        >
          <QuestionsPreview
            v-if="dialogVisible"
            :artId="artId"
            @close="handleClose"
          />
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入接口
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
// 学科下拉数据
import { simple } from '@/api/hmmm/subjects'
// 二级学科下拉数据
import { simple as simple2 } from '@/api/hmmm/directorys'
// 标签下拉数据
import { simple as simple3 } from '@/api/hmmm/tags'
// 录入人下拉数据
import { simple as simple4 } from '@/api/base/users'
// 方向数据列表
import { direction as directionList } from '@/api/hmmm/constants'
// 城市数据列表
import { provinces as provincesList, citys } from '@/api/hmmm/citys'
// 预览框
import QuestionsPreview from '../components/questions-preview.vue'

export default {
  name: 'Questions',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      form: {
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: null, // 企业所在地省份
        city: '', // 企业所在地城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 目录
      },
      query: {
        page: 1, // 当前页数
        pagesize: 10 // 页尺寸
      },
      tableData: [], // 试题列表
      counts: 0, // 数据总条数
      simple: [], // 学科下拉数据
      simple2: [], // 二级学科下拉数据
      simple3: [], // 标签下拉数据
      simple4: [], // 录入人下拉数据
      directionList: directionList, // 方向数据列表
      citysList: [], // 下属城市数据列表
      provincesLists: provincesList(), // 城市数据列表
      dialogVisible: false, // 预览框
      artId: ''
    }
  },
  created () {
    this.tableList()
    this.simpleList()
    this.enrollPeopleList()
  },

  methods: {
    openDialog () {
      console.log(this.artId)
    },
    // 加入精选题库
    async choiceAddArticle (id) {
      const confir = await this.$confirm('将加入精选题库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confir !== 'confirm') return this.$message.success('您取消了添加')
      await choiceAdd({ id, choiceState: 1 })
      this.$message.success('添加精选题库成功')
      this.tableList()
    },

    // 删除文章
    async delArticle (id) {
      const confir = await this.$confirm(
        '此操作将永久删除该题目, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confir !== 'confirm') return this.$message.success('您取消了删除')
      await remove({ id })
      this.$message.success('删除成功')
      this.tableList()
    },

    // 带id跳转试题录入页面
    getDescribe (id) {
      // 直接调用$router.push 实现携带参数的跳转
      this.$router.push({
        path: 'new',
        query: {
          id: id
        }
      })
    },

    // 预览按钮预览框显示
    previewArticle (id) {
      this.dialogVisible = true
      // console.log(id)
      this.artId = id
    },

    // 预览框关闭确认
    handleClose (done) {
      this.dialogVisible = false
    },

    // 获取下属城市数据
    cityList (val) {
      // console.log(val)
      this.citysList = citys(val)
    },

    // 获取二级学科目录和 获取标签列表
    async simple2List (val) {
      // console.log(val)
      const res = await simple2({ subjectID: val })
      console.log(res)
      this.simple2 = res.data

      const resp = await simple3({ subjectID: val })
      console.log(resp)
      this.simple3 = resp.data
    },

    // 获取学科列表
    async simpleList () {
      const res = await simple()
      console.log(res)
      this.simple = res.data
    },

    // 获取试题列表
    async tableList () {
      const res = await list(this.query)
      // console.log(res)
      this.counts = res.data.counts
      this.tableData = res.data.items
    },

    // 获取录入人列表
    async enrollPeopleList () {
      const res = await simple4()
      // console.log(res)
      this.simple4 = res.data
    },

    // 筛选按钮
    async onSubmit () {
      if (this.form.keyword !== '' || this.form.subjectID !== '') {
        // console.log('submit!')
        const res = await list({
          keyword: this.form.keyword,
          subjectID: this.form.subjectID,
          ...this.query
        })
        // console.log(res)
        this.counts = res.data.counts
        this.tableData = res.data.items
      } else {
        this.tableList()
      }
    },

    // 清除按钮
    ClearData () {
      this.form = {
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: null, // 企业所在地省份
        city: '', // 企业所在地城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 目录
      }
      this.$refs.form.resetFields()
    },

    // 没页条数发生变化时触发
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.query.pagesize = val
      this.tableList()
    },

    // 页数发生变化时触发
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.query.page = val
      this.tableList()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  margin: 10px;
  // 边距都为10
  .top_title {
    margin-bottom: 15px;
    // 下边距15px
    display: flex;
    // 弹性布局
    justify-content: space-between;
    /* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */
    span {
      font-size: 12px;
      // 字体大小12px
      color: pink;
      // 字体颜色粉色
    }
  }
  .city-1 {
    width: 45%;
    margin-right: 5%;
  }
  .city-2 {
    width: 50%;
  }
  .basics-question-bank-paging {
    margin-top: 20px;
  }
}
</style>
